<template>



    <el-container style="width: 600px; margin: 0 auto; ">


      <el-main>
        <div class="welcome-message">
          <h2>欢迎使用订单系统</h2>
        </div>

        <el-row class="quick-access" gutter="20">
          <el-col :span="12">
            <el-card style="text-align: center">
              <el-button type="primary" @click="importOrders">导入订单</el-button>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="text-align: center">
              <el-button type="success" @click="viewOutbound">查看出库单</el-button>
            </el-card>
          </el-col>

        </el-row>

        <el-card class="stats">
          <h2>数据概览</h2>
          <ul>
            <li>当前待处理订单数量: <strong>{{ pendingOrders }}</strong></li>
            <li>所有数据数量: <strong>{{ shipmentsToday }}</strong></li>
          </ul>
        </el-card>
      </el-main>
    </el-container>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import router from "@/router/index.js";
import axios from "@/plugins/axios.js";


const pendingOrders = ref();
let shipmentsToday = ref();
let values = [];


// 模拟按钮点击事件
const importOrders = () => {
  router.push("/orderin")
};

const viewOutbound = () => {
  router.push("/order")
};

const generateReport = () => {
  alert('生成报表功能尚未实现!');
};

onMounted(() => {
  fetchData();
});

const fetchData =  () => {


  axios.post("/order/buxiangxiele") .then(resp=>{

    values= resp;

    pendingOrders.value = values[1]

    shipmentsToday.value = values[0]
  })
};

</script>

<style scoped>
.header-title {
  color: #409EFF;
  margin: 0;
}

.welcome-message {
  margin: 20px 0;
  text-align: center;
}

.quick-access {
  margin-bottom: 30px;
  text-align: center;
}

.stats {
  padding: 20px;
  text-align: left;
}
.menu {
  background-color: #f6f6f6;
}
</style>